<template>
	<view class="content">
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabList" lineColor="#FD9618" :activeStyle="{ color: '#FD9618' }"
				:itemStyle="{ width: '50%',height: '40px' }" @click="tabClick"></u-tabs>
		</u-sticky>
		<view class="listBox" v-if="curTab==0">
			<view class="listTop flex">
				<view class="integral flex-1">
					<view class="tit">当前积分</view>
					<view class="txt">{{inofData.availablePoints}}</view>
				</view>
				<view class="tip">
					<navigator url="integralDesc">如何获得更多积分？</navigator>
				</view>
			</view>
			<view class="mainBox">
				<view class="radioBox flex">
					<view class="radio" :class="curRadio==item.val?'active':''" v-for="(item,i) in radioList" :key="i"
						@click="updateRadio(item.val)">
						{{item.title}}
					</view>
				</view>
				<view class="intList">
					<view class="intLi flex" v-for="item in listData" :key="item.id">
						<view class="tit">{{item.sendType}}</view>
						<view class="price flex-1">{{item.changeValueType!==1?'-':'+'}} {{item.changeValue}}</view>
						<view class="date text-right"><uni-dateformat :date="item.createTime"></uni-dateformat></view>
					</view>
				</view>
			</view>
		</view>
		<view class="listBox2" v-if="curTab==1">
			<!-- <view class="list" v-for="item in 3">
				<image class="img" :src="$imgUrl + '/integral/right1.png'" mode=""></image>
				<button type="primary" class="btn">去兑换</button>
			</view> -->
			<u-empty mode="list"></u-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { getUserInfo, getList } from "@/common/API/integral.ts"
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
const curTab = ref(0)
const tabList = ref([{
		name: '我的积分'
	},
	{
		name: '我的权益'
	}
])
const curRadio = ref()
const radioList = ref([{
	title: '全部',
	val: null
}, {
	title: '已获取',
	val: 1
}, {
	title: '已使用',
	val: 0
}])
const listData = ref([])
const inofData = ref({})
				
onLoad(() => {
	getInfo();
	getListData();
})
const tabClick = (e)=> {
	curTab.value = e.index;
}
const updateRadio = (val)=> {
	curRadio.value = val
	getListData()
}
const getInfo = async ()=> {
	let res = await getUserInfo()
	inofData.value = res
}
const getListData = async ()=> {
	let data = {
		pageNo: 1,
		pageSize: 20,
		changeValueType: null
	}
	data.changeValueType = curRadio.value
	let res = await getList(data)
	listData.value = res.list
}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;

		.listBox {
			padding: 20rpx 32rpx;

			.listTop {
				width: 686rpx;
				height: 222rpx;
				background: url('#{$imgUrl}/integral/intBg.png') no-repeat;
				background-size: 100%;
				padding: 28rpx 12rpx 10rpx 44rpx;

				.integral {
					.tit {
						font-size: 24rpx;
					}

					.txt {
						font-size: 64rpx;
						color: $uni-color-primary;
					}
				}

				.tip {
					font-size: 24rpx;
				}
			}

			.mainBox {
				background: #fff;
				border-radius: 16rpx;
				margin-top: 20rpx;

				.radioBox {
					padding: 32rpx 20rpx;

					.radio {
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 26rpx;
						opacity: 1;
						border: 2rpx solid #DBDBDB;
						color: #333;
						font-size: 26rpx;
						padding: 0 32rpx;
						margin-right: 12rpx;

						&.active {
							background: $uni-color-primary;
							border-color: $uni-color-primary;
							color: #fff;
						}
					}
				}

				.intList {
					.intLi {
						border-bottom: 2rpx solid #F2F3F5;
						padding: 20rpx 32rpx;

						.tit,
						.price,
						.date {
							line-height: 60rpx;
						}

						.tit {
							width: 140rpx;

						}

						.price {
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-right: 20rpx;
						}

						.data {
							width: 260rpx;
						}
					}
				}
			}
		}

		.listBox2 {
			padding: 20rpx 32rpx;

			.list {
				width: 686rpx;
				height: 276rpx;
				margin: 0 0 20rpx;
				position: relative;

				.btn {
					background: $uni-color-primary;
					color: #fff;
					position: absolute;
					width: 150rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					top: 176rpx;
					left: 310rpx;
					font-size: 24rpx;
				}
			}
		}
	}
</style>